<template>
  <div class="header">
    <el-row>
      <el-col :span="24">
        <el-card class="box-card">
          <div class="shouye">进销存系统</div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="12">
        <el-card class="box-card">
          <div style="margin-bottom: 10px"> 业务</div>
          <el-row>
            <el-col :span="8">
              <el-button type="text" icon="el-icon-user" @click="jumpTo('/customer')">客户</el-button>
            </el-col>
            <el-col :span="8">
              <el-button type="text" icon="el-icon-goods" @click="jumpTo('/sales')">销售订单</el-button>
            </el-col>
            <el-col :span="8">
              <el-button type="text" icon="el-icon-back" @click="jumpTo('/stock/inbound')">销售出库</el-button>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-button type="text" icon="el-icon-office-building" @click="jumpTo('/purchase/supplier/supplierInfo')">
                供应商信息
              </el-button>
            </el-col>
            <el-col :span="8">
              <el-button type="text" icon="el-icon-document-copy" @click="jumpTo('/purchase/supplierOrder')">采购订单
              </el-button>
            </el-col>
            <el-col :span="8">
              <el-button type="text" icon="el-icon-right" @click="jumpTo('/stock/outBound')">采购入库</el-button>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="box-card">
          <div style="margin-bottom: 10px"> 数据</div>
          <el-row>
            <el-col :span="8">
              <el-button icon="el-icon-coin" type="text" @click="jumpTo('/stock')">库存看板</el-button>
            </el-col>
            <el-col :span="8">
              <el-button type="text" icon="el-icon-goods" @click="jumpTo('/basic/product/productInfo')">产品看板
              </el-button>
            </el-col>
            <el-col :span="8">
              <el-button type="text" icon="el-icon-box" @click="jumpTo('/basic/warehouse')">仓库看板</el-button>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-button type="text" icon="el-icon-shopping-cart-1" @click="jumpTo('/sales')">销售订单看板</el-button>
            </el-col>
            <el-col :span="8">
              <el-button type="text" icon="el-icon-document" @click="jumpTo('/purchase/supplierStatistics')">
                采购订单看板
              </el-button>
            </el-col>
            <el-col :span="8">
              <el-button type="text" icon="el-icon-s-data" @click="jumpTo('/purchase/supplier/supplierPrice')">
                供应商产品看板
              </el-button>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
    <el-tabs >
      <el-tab-pane label="销售订单">
        <el-row :gutter="10">
          <el-col :span="4">
            <el-card shadow="hover" style="width: 100%;">
              销售入库
              <el-popover v-for="item in selllist" trigger="hover" placement="top" :value="item.order">
                <p>仓库: {{ item.warehouse }}</p>
                <p>数量: {{ item.quantity }}</p>
                <div slot="reference" class="name-wrapper">
                  <p>
                    <el-tag size="medium" disabled="disabled" @click="handle(item.order)">
                      {{item.warehouse }}-{{ item.quantity }}
                    </el-tag>
                  </p>
                </div>
              </el-popover>
            </el-card>
          </el-col>
          <el-col :span="20">
            <el-col :span="6">
              <el-card>
                销售订单单数
                {{ sellInfo.num }}
              </el-card>
            </el-col>
            <el-col :span="6">
              <el-card>
                销售订单金额
                {{ sellInfo.price }}
              </el-card>
            </el-col>
            <el-col :span="6">
              <el-card>
                销售出库单数
                {{ sellnum.num }}
              </el-card>
            </el-col>
            <el-col :span="6">
              <el-card>
                销售出库产品数
                {{ sellnum.quantity }}
              </el-card>
            </el-col>
            <div id="sell" style="width: 800px;height: 390px;margin-top: 20px" data-zoomable data-draggable/>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="采购订单">
        <el-row :gutter="10">
          <el-col :span="4">
            <el-card shadow="hover" style="width: 100%;">
              采购入库
              <el-popover v-for="item in procurelist" trigger="hover" placement="right" :value="item.order">
                <p>仓库: {{ item.warehouse }}</p>
                <p>数量: {{ item.quantity }}</p>
                <div slot="reference" class="name-wrapper">
                  <p>
                    <el-tag size="medium" disabled="disabled" @click="handle(item.order)">
                      {{item.warehouse }}-{{ item.quantity }}
                    </el-tag>
                  </p>
                </div>
              </el-popover>
            </el-card>
          </el-col>
          <el-col :span="20">
            <el-col :span="6">
              <el-card>
                采购订单金额
                {{ procureInfo.price }}
              </el-card>
            </el-col>
            <el-col :span="6">
              <el-card>
                采购订单单数
                {{ procureInfo.num }}
              </el-card>
            </el-col>
            <el-col :span="6">
              <el-card>
                采购入库单数
                {{ procurenum.num }}
              </el-card>
            </el-col>
            <el-col :span="6">
              <el-card>
                采购入库产品数
                {{ procurenum.quantity }}
              </el-card>
            </el-col>

            <div id="procure" style="width: 800px;height: 390px;margin-top: 20px" data-zoomable data-draggable/>
          </el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>

    <el-drawer
      title="订单详情"
      :visible.sync="drawer"
      :direction="direction"
      size="55%"
      :show-close="false"
    >
      <el-descriptions class="margin-top" :column="3"  border>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"/>
            订单号
          </template>
          {{ orderInfo.ordercode }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-mobile-phone"/>
            负责人
          </template>
          {{ orderInfo.account.username }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-location-outline"/>
            总价钱
          </template>
          {{ orderInfo.price }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-tickets"/>
            who
          </template>
          <el-tag >
            {{ orderInfo.object.name }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-office-building"/>
            入库时间
          </template>
          {{ orderInfo.createTime }}
        </el-descriptions-item>
      </el-descriptions>
      <el-table
        :data="orderInfo.details"
        style="width: 100%;margin-top: 10px;margin-left: 20px;margin-bottom: 20px">
        <el-table-column
          prop="product.name"
          label="产品名字"
          width="180"
        />
        <el-table-column
          prop="product.brand"
          label="产品品牌"
          width="180"
        />
        <el-table-column
          prop="product.model.info"
          label="产品类别"
        />
        <el-table-column
          prop="quantity"
          label="数量"
        />
      </el-table>
      出入库详细信息
      <el-table
        :data="orderInfo.inandout"
        style="width: 100%;margin-top: 10px;margin-left: 20px;margin-bottom: 20px"
      >
        <el-table-column
          prop="warehouse"
          label="仓库"
          width="180"
        />
        <el-table-column
          prop="product.name"
          label="产品名字"
          width="180"
        />
        <el-table-column
          prop="product.brand"
          label="产品品牌"
          width="180"
        />
        <el-table-column
          prop="product.model.info"
          label="产品类别"
        />
        <el-table-column
          prop="quantity"
          label="数量"
        />
      </el-table>
    </el-drawer>
  </div>
</template>

<script setup>
import router from '@/router'
import homeApi from '@/api/home/home'
import orderApi from '@/api/order/order'
import * as echarts from 'echarts'
import { onMounted, ref } from 'vue'

// eslint-disable-next-line no-unused-vars
const jumpTo = (path) => {
  router.push(path)
}
// eslint-disable-next-line no-unused-vars
const drawer = ref(false)
// eslint-disable-next-line no-unused-vars
const direction = ref('rtl')
const selllist = ref([])
const procurelist = ref([])
const orderInfo = ref({
  object: {},
  account: {},
  details: [],
  inandout: []
})
const procurenum = ref({})
const sellnum = ref({})
const procureInfo = ref({})
const sellInfo = ref({})

onMounted(async() => {
  showzhexiantu()
})
const selloption = {
  xAxis: {
    type: 'category',
    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
  },
  yAxis: {
    type: 'value'
  }
}
const procureoption = {
  xAxis: {
    type: 'category',
    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
  },
  yAxis: {
    type: 'value'
  }
}
const showzhexiantu = () => {
  var chartDom = document.getElementById('sell')
  var myChart = echarts.init(chartDom)
  myChart.setOption(selloption)
  var pchartDom = document.getElementById('procure')
  var pmyChart = echarts.init(pchartDom)
  pmyChart.setOption(procureoption)
  homeApi.showsell().then(res => {
    const procureprice = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1222]
    const sellprice = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
    selllist.value = res.data.sell
    procurelist.value = res.data.procure
    procurenum.value = res.data.procurenum
    sellnum.value = res.data.sellnum
    procureInfo.value = res.data.procureInfo
    sellInfo.value = res.data.sellInfo
    res.data.sellorder.map(item => {
      sellprice[item.month - 1] = item.sum
    })
    res.data.procureorder.map(item => {
      procureprice[item.month - 1] = item.sum
    })
    myChart.setOption({
      series: [
        {
          data: sellprice,
          type: 'line',
          emphasis: {
            label: {
              show: true
            }
          }
        }
      ]
    })
    pmyChart.setOption({
      series: [
        {
          data: procureprice,
          type: 'line',
          emphasis: {
            label: {
              show: true
            }
          }
        }
      ]
    })
  })
}
// eslint-disable-next-line no-unused-vars
const handle = (order) => {
  orderApi.homeorder(order).then(res => {
    drawer.value = true
    orderInfo.value = res.data
    orderInfo.value.inandout = res.inandout
  })
}

</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }

  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}

.shouye {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #426ab3;
}
</style>
